<template>
  <div class="container">

      <a-card title="登录" style="width: 320px">

        <a-form class="form" :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
          autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="用户账号" name="user" :rules="[{ required: true, message: '登录账号不能为空!' }]">
              <a-input placeholder="请输入用户账号" v-model:value="formState.user" />
        
            </a-form-item>

            <a-form-item label="登录密码" name="password" :rules="[{ required: true, message: '登录密码不能为空!' }]">
              <a-input-password placeholder="请输入登录密码" v-model:value="formState.password" />
            
            </a-form-item>
   
          <!-- <a-form-item
      label="时间戳"
      name="timestamp" 
    >
      <a-input   
      v-model:value="formState.timestamp" />
    </a-form-item> -->
 
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" html-type="submit">登录</a-button>
            </a-form-item>

        </a-form>

  
      </a-card>
 
  </div>
</template>
<!-- <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> -->
<!-- <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> -->
<script setup lang="ts">
import { computed, reactive} from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/user';
import { message } from 'ant-design-vue';
import { useMenuStore } from '/@/store/modules/menu';
const userStore = useUserStore()
const menuStore = useMenuStore()
const router = useRouter()
interface FormState {
  user: string;
  password: string;
  timestamp: string;
}
const formState = reactive<FormState>({
  user: 'admin',
  password: '123456',
  timestamp: ''
});
const onFinish = (values: any) => {
  userStore.login(
    values.user,
    values.password,
    values.timestamp
  ).then(() => {
    message.success('登录成功！')
    // 初始化权限标识
    userStore.initPermCode()
    // .then(()=>{
    //   // 初始化菜单
    menuStore.initMenu()
    router.replace({
      path: '/'
    })
    // })
    // 初始化用户信息
    userStore.getUserInfo()
  }).catch((e: Error) => {
    message.error(e.message)
  })
};
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const token = computed(() => {
  return userStore.getToken
})

</script>
<style lang="less" scoped>

</style>